<template>
  <view class="quesiton-page-qx"
    :style="{'background-image':`url(${staticImgs.bg})`}"
  >
    <navigationBar :emitBackEvent="true" @backEvent="$emit('backHandle')" :my-property="navigationBarDataInfo"/>
    
    <view class="main-wrapper">
      <view class="row-1">
        <view class="progress-bar">
          <view class="text">{{current}}</view>
          <view class="text">/14</view>
        </view>
        <view class="clock-wrapper">
          <image class="clock-icon" :src="staticImgs.clockImg" mode="widthFix"></image>
          <view class="clock-text">
            {{countTimeStr}}
          </view>
        </view>
      </view>
      <view class="question-box" v-if="current != 14">
        {{question || ''}}
      </view>
      <view class="tip-text" v-if="current != 14">{{tipInfo}}</view>
      <template v-if="current == 13">
        <view class="options-wrapper">
          <view class="opt-item" :class="{'opt-item-act':hasItem(item)}" v-for="(item,index) in optnList"
            @click="changeItemAct(item)"
          >
            <view class="img-wrapper">
              <image class="img" :src="item.optnImg" mode="widthFix"></image>
            </view>
            <view class="text">{{item.optnContent}}</view>
          </view>
        </view>
      </template>
      <template v-else-if="current == 14">
        <view class="gender-choice-wrapper">
          <view class="gender-item" @click="changeGender('女')">
            <image class="img" :src="womanImg" mode="widthFix"></image>  
          </view>
          <view class="gender-item" @click="changeGender('男')">
            <image class="img" :src="manImg" mode="widthFix"></image>  
          </view>
        </view>
        
        <view class="opts-wrapper-14">
          <view class="opt-item" @click="changeLastSelectIndex(index)" :class="{'opt-item-act':lastSelectIndex === index}" v-for="(item,index) in optnList">
            {{item.optnContent}}
          </view>
        </view>
      </template>
      <template v-else>
        <view class="opt-type-1">
          <view
            class="left-label"
            :style="{'background-image':`url(${staticImgs.leftLabel})`}"
          >
            <view v-if="hasOverMaxOptCon" class='over-max-opt-con-label'>
              {{optConArr[0]}}  
            </view>
            <template v-else>
              {{optConArr[0]}}  
            </template>
          </view>
          
         <!-- <view
            class="right-label"
            :style="{'background-image':`url(${staticImgs.rightLabel})`}"
          >
            <view v-if="hasOverMaxOptCon" class='over-max-opt-con-label'>
              {{optConArr[1]}}  
            </view>
            <template v-else>
              {{optConArr[1]}}  
            </template>
          </view> -->
          <view class="opt-type-text l-tip">我更倾向这边</view>
        </view>
      
        <view class="slider-wrapper" @click="changeFirstTap" >
          <haoSlider v-if="!reRenderSlider"  @change="changeSlideVal" :bgDotImgUrl="staticImgs.defDot" :sliderBlockSize="68" borderRadius="26rpx" :imgSliderUrl="staticImgs.actDot" v-model="value" :isTip="false" middleColor="rgba(33, 181, 236, 1)" :max="5" :min="1" sliderHeight="40" sliderLeftColor="rgba(97,147,245, 1)" sliderRightColor="rgba(131, 206, 240, 0.3)" />
        </view>
        
        <view class="opt-type-1">
          <!-- <view
            class="left-label"
            :style="{'background-image':`url(${staticImgs.leftLabel})`}"
          >
            <view v-if="hasOverMaxOptCon" class='over-max-opt-con-label'>
              {{optConArr[0]}}  
            </view>
            <template v-else>
              {{optConArr[0]}}  
            </template>
          </view> -->
          <view class="opt-type-text r-tip">我更倾向这边</view>
          <view
            class="right-label"
            :style="{'background-image':`url(${staticImgs.rightLabel})`}"
          >
            <view v-if="hasOverMaxOptCon" class='over-max-opt-con-label'>
              {{optConArr[1]}}  
            </view>
            <template v-else>
              {{optConArr[1]}}  
            </template>
          </view>
        </view>
              
      </template>
      
      <view class="btn-wrapper"
        :style="{'marginTop':isSpecialQst ? '54rpx' : '80rpx'}"
      >        
        <view class="next-btn" v-if="current!==1">
          <image @click="preBtnHandle" class="img" :src="staticImgs.preImg" mode="widthFix" />
        </view>
        
        <view class="next-btn" >
          <image @click="nextBtnHandle" class="img" :src="staticImgs.nextImg" mode="widthFix" />
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  import lxProgressBar from '@/subcontractorD/components/lx-progress-bar/components/lx-progress-bar/lx-progress-bar.vue'
  import haoSlider from '@/components/hao-slider.vue'
  var app = getApp();
  let countTimer;
  let clockTimer;
  export default {
    components:{
      navigationBar,
      lxProgressBar,
      haoSlider
    },
    props:{
      percent:{
        type:Number,
        default:0
      },
      max:{
        type:Number,
        default:0
      },
      current:{
        type:Number,
        default:0
      },
      countTime:{
        type:String,
        default:''
      },
      optnList:{
        type:Array,
        default:()=>[]
      },
      question:{
        type:String,
        default:''
      },
      mbtiType:{
        type:String,
        default:'job-mbti'
      }
    },
    data(){
      return {
        navigationBarDataInfo:{
        	"bg_color": "transparent",
        	"color": "#333",
        	"flag": 1,
        	"name": "测一测",
          "hasEntity":true,
        },
        value:1,
        staticImgs:{
          bg: this.imgBaseURL + '/scl/question-page/45/v2-bg.jpg',
          nextImg: this.imgBaseURL + '/scl/question-page/45/v2-btn-right.png',
          preImg: this.imgBaseURL + '/scl/question-page/45/v2-btn-left.png',
          leftLabel: this.imgBaseURL + '/scl/question-page/45/v2-dialog-l-bg.png',
          rightLabel: this.imgBaseURL + '/scl/question-page/45/v2-dialog-r-bg.png',
          actDot: this.imgBaseURL + '/scl/question-page/45/v2-dot-act.png',
          defDot: this.imgBaseURL + '/scl/question-page/45/v2-dot-def.png',
          clockImg:this.imgBaseURL + '/scl/question-page/45/v2-clock-icon.png',
          
          womanImg: this.imgBaseURL + '/scl/question-page/45/v2-woman.png',
          manImg: this.imgBaseURL + '/scl/question-page/45/v2-man.png',
          womanActImg: this.imgBaseURL + '/scl/question-page/45/v2-woman-act.png',
          manActImg: this.imgBaseURL + '/scl/question-page/45/v2-man-act.png',
          
        },
        topH:0,
        // percentNum:40,
        legendNum:0,
        reRenderLegend:false,
        selectIndex:-1,
        countTimeStr:'',
        startDateTime:0,
        hasOverMaxOptCon:false,
        firstTap:false,
        moreAnswer:[],
        moreAnswerRes:'',
        lastSelectIndex:null,
        gender:null,
        reRenderSlider:false
      }
    },
    computed:{
      optConArr(){
        if(this.current && this.optnList){
          return this.optnList[0].optnContent.split('-')
        }else{
          return ['','']
        }
      },
      tipInfo(){
        return this.current == 13 ? '提示：此题可多选，最多选三个，再次点击可取消选择' : '提示：请点击对应节点选择'
      },
      isSpecialQst(){
        return this.current == 13
      },
      womanImg(){
        return this.gender == '女' ? this.staticImgs.womanActImg : this.staticImgs.womanImg
      },
      manImg(){
        return this.gender == '男' ? this.staticImgs.manActImg : this.staticImgs.manImg
      }
    },
    watch:{
      current(val,oldVal){
        this.value = 1
        
        const _index = this.optnList.findIndex(item=>item.select=='1')
        console.log(_index,'====_index')
        this.value = _index > -1 ? _index+1 : 1
        // console.log(this.optnList,'----optnList')
        
        this.reRenderSlider = true 
        this.$nextTick(()=>{
          this.reRenderSlider = false
        })
      },
      optConArr(val){
        this.hasOverMaxOptCon = val[0].length>9
      },
      // countTime(val){
      //   if(val){
      //     this.countTimeStr = val
      //   }
      // }
    },
    mounted() {
      this.topH = app.globalData.topHeight * 2
      
      this.startDateTime = this.$dayjs()
      clockTimer = setInterval(()=>{
        // 00:00 这种格式
        this.countTimeStr = this.$dayjs().subtract(this.startDateTime).format('mm:ss')
      },1000)
    },
    beforeDestroy(){
      clearInterval(clockTimer)
    },
    methods:{
      changeSlideVal(val){
        this.value = val
        console.log(this.value,'-------this.value')
        this.changeFirstTap()
      },
      changeGender(str){
        this.gender = str
      },
      changeLastSelectIndex(index){
        this.lastSelectIndex = index
      },
      hasItem(item){
        return this.moreAnswer.includes(item.optnContent)
      },
      changeItemAct(item){
        item.dcAct = !item.dcAct
        
        if(this.hasItem(item)){
          this.moreAnswer = this.moreAnswer.filter(subItem => subItem !== item.optnContent);
          
          console.log(this.moreAnswer,'----this.moreAnswer---');
        }else{
          if(this.moreAnswer.length>2){
            return this.$showToast('最多选三个喔')
          }
          this.moreAnswer.push(item.optnContent)
        }
      },
      changeFirstTap(){
        this.firstTap = false
      },
      selectAnswer(item,index,finalData){
      	this.selectIndex = index;
      	this.$emit('updateSelectSclQuestion',index,finalData);
      },
      processMoreData(){
        const tmpArr = [this.moreAnswerRes,this.gender,this.optnList[this.lastSelectIndex].optnContent]
        return JSON.stringify(tmpArr)
      },
      preBtnHandle(){
        this.$emit('prev')
      },
      nextBtnHandle(){
        if(this.current == 13){
          if(this.moreAnswer.length == 0){
            this.$showToast('提示：请至少选择一项')
            return
          }
          
          let tmpArr = []
          this.optnList.map(item=>{
            if(this.hasItem(item)){
              tmpArr.push({
                img:item.optnImg,
                txt:item.optnContent
              })
            }
          })
          this.moreAnswerRes = tmpArr
          
          this.selectAnswer(this.optnList[this.value],this.value)
        }else if(this.current == 14){
          if(!this.gender){
            this.$showToast('请选择您的性别')
            return
          }
          if(this.lastSelectIndex === null){
            this.$showToast('请选择您的年龄')
            return
          }
          
          this.selectAnswer(this.optnList[this.value],this.lastSelectIndex,this.processMoreData())
          // setTimeout(()=>{
          //   this.$emit('next',this.processMoreData())
          // },400)
        }else{
          if(this.firstTap && this.current==1){
            this.$showToast('提示：拖动滑块进行选择')
            this.firstTap = false
            return false
          }
          
          this.selectAnswer(this.optnList[this.value -1],this.value -1)
        }
        
      },
    }
  }
</script>

<style scoped lang="scss">
  @keyframes shake {
    0% {
      transform: translateX(0) translateY(0);
    }
    50% {
      transform: translateY(-10%);
    }
    100% {
      transform:translateX(0) translateY(0);
    }
  }
  
.quesiton-page-qx{
  background-color: #E9E8FF;
  position: relative;
  width: 100%;
  min-height: 100vh;

  background-repeat: no-repeat;
  background-size: 100% 100%;  
  
  .main-wrapper >.row-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    margin-top: 60rpx;
    margin-bottom: 26rpx;
    padding-left: 36rpx;
    padding-right: 36rpx;
  }
  
  .progress-bar{
    display: flex;
    align-items: center;
    // justify-content: space-between;
    .text{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      font-style: normal;
      
      &:last-child{
        color: rgba(119, 183, 220, 1);
      }
    }
  }
  
  .clock-wrapper {
    display: flex;
    align-items: center;

    .clock-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }

    .clock-text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #77B7DC;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
    }
  }
  
  
  .question-box{
   font-family: PingFangSC, PingFang SC;
   font-weight: 500;
   font-size: 50rpx;
   color: #333333;
   line-height: 70rpx;
   text-align: center;
   font-style: normal; 
  }
  
  .options-wrapper{
    display: flex;
    flex-wrap: wrap;
    
        justify-content: center;
        row-gap: 26rpx;
        column-gap: 20rpx;
    
    .opt-item{
      width: 330rpx;
      height: 76rpx;
      background: #FFFFFF;
      border-radius: 38rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 24rpx;
      
      .img-wrapper{
        display: flex;
        align-items: center;
        margin-right: 10rpx;
        
        .img{
          width: 40rpx;
          height: 40rpx;
        }
      }
      
      .text{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }
    }
    
    
    .opt-item-act{
      background: rgba(59, 187, 234, 1);
      
      .text{
        color: rgba(255, 255, 255, 1);
      }
    }
  }
  
  .opt-type-1{
    display: flex;
    justify-content: space-between;
    // margin: 0 46rpx 70rpx 46rpx;
    
    .left-label,.right-label{
      width: 400rpx;
      height: 200rpx;
      box-sizing: border-box;
      
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 33rpx;
      color: #FFFFFF;
      line-height: 48rpx;

      font-style: normal;
      
      background-size: 100% 100%;
      background-repeat: no-repeat;
      
      view{
        // padding-top: 24rpx;
        height: 96rpx;
        display: flex;
        align-items: center;
        width: 170rpx;
        word-break: break-word;
        margin: auto;
      }
    }
    .left-label{
      text-align: center;
    
      display: flex;
      align-items: center;
      
      padding-left: 58rpx;
    }
    .right-label{
      text-align: center;
      
      display: flex;
      align-items: center;
      justify-content: flex-end;
      
      padding-right: 58rpx;
    }
    
    .opt-type-text{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      line-height: 37rpx;
      font-style: normal;
    }
    
    .l-tip{
      margin-right: 36rpx;
      
      display: flex;
      align-items: flex-end;
      padding-bottom: 4rpx;
    }
    
    .r-tip{
      margin-left: 36rpx;
      padding-top: 4rpx;
    }
    
    
    .over-max-opt-con-label{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 34rpx;
      color: #FFFFFF;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      width: 170rpx;
      word-break: break-word;
      margin: auto;
      // padding-top: 12rpx !important;
      height: 96rpx;
      display: flex;
      align-items: center;
    }
    

    
  }
  
  .slider-wrapper{
    width: 650rpx;
    margin:40rpx auto;
    padding: 0 10rpx;
    
    min-height: 40rpx;
  
  }
  
  .tip-text{
    margin-top: 16rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #797979;
    // line-height: 33rpx;
    text-align: center;
    font-style: normal;
    
    margin-bottom: 150rpx;
  }
  
  .btn-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 100rpx;
  }
  
  .next-btn{
    // margin: auto;
    // margin-top: 150rpx;
    display: flex;
    justify-content: center;
    .img{
      width: 180rpx;
      height: 180rpx;
    }
  }
  
  
  .gender-choice-wrapper{
    display: flex;
    justify-content: center;

    column-gap: 100rpx;
    margin-top: 120rpx;
    
    .gender-item{
      display: flex;
      align-items: center;
    }
    
    .img{
      width: 110rpx;
      height: 110rpx;
    }
  }
  
  .opts-wrapper-14{
    margin-top: 50rpx;
    display: flex;
    flex-direction: column;
    row-gap: 26rpx;
    align-items: center;
    
    .opt-item{
      width: 600rpx;
      height: 76rpx;
      background: #FFFFFF;
      border-radius: 38rpx;
      
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 76rpx;
      text-align: center;
      font-style: normal;
    }
    
    .opt-item-act{
      background-color: rgba(59, 187, 234, 1);
      
      
      color: #fff;
    }
  }
}
</style>